<!-- uniapp vue3 markdown解析 -->
<template>
  <view class="ua__markdown">
    <!-- #ifndef MP-WEIXIN -->
    <rich-text space="nbsp" :nodes="parseNodes(source)" @itemclick="handleItemClick"></rich-text>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <rich-text space="nbsp" :nodes="htmlString1" @click="handleItemClickweiin(str1)"></rich-text>
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import MarkdownIt from './lib/markdown-it.min.js'
import hljs from './lib/highlight/uni-highlight.min.js'
import './lib/highlight/atom-one-dark.css'
import parseHtml from './lib/html-parser.js'
import { onLoad, onPageScroll, onReady, onShow } from '@dcloudio/uni-app'
const yanshi = ref(true)
let bii = ref('')
const props = defineProps({
  // 解析内容
  source: String,
  showLine: { type: [Boolean, String], default: true },
})
const html11 = ref('')
const html111 = ref('')
const str1 = ref('')
let copyCodeData = []
let index1 = 0
let htii = ''
const markdown = MarkdownIt({
  html: true,
  highlight: function (str, lang) {
    let preCode = ''
    try {
      preCode = hljs.highlightAuto(str).value
    } catch (err) {
      preCode = markdown.utils.escapeHtml(str)
    }

    // console.log(preCode, '我看看 啊')
    // console.log(str)
    const lines = preCode.split(/\n/).slice(0, -1)
    // 添加自定义行号
    let html = lines
      .map((item, index) => {
        // console.log(item, '对应')
        // console.log(str, 'ddd看看')
        html11.value = ''
        if (item == '') {
          return ''
        }
        htii = '<li><span class="line-num" data-line="' + (index + 1) + '"></span>' + item + '</li>'

        // 打字效果

        // for (let index = 0; index < item.length; index++) {
        //   html11.value += item.substr(index, 1)

        //   htii =
        //     '<li><span class="line-num" data-line="' +
        //     (index + 1) +
        //     '"></span>' +
        //     html11.value +
        //     '</li>'
        // }
        // console.log(htii, 'fffffffffffffff')
        return htii
      })
      .join('')

    // ////////////
    // console.log(html, '比赛')

    if (props.showLine) {
      html = '<ol style="padding: 0px 30px;">' + html + '</ol>'
    } else {
      html = '<ol style="padding: 0px 7px;list-style:none;">' + html + '</ol>'
    }
    // console.log(html, '666666')
    // ////////////////////
    let num = ''
    let htmlCode = `<div class="markdown-wrap">`

    // html111.value=''
    // for (let index = 0; index < html.length; index++) {
    //   num += html.substr(index, 1)
    // }

    // console.log(num, '6623236666')

    copyCodeData.push(str)
    str1.value = str

    // #ifndef MP-WEIXIN
    console.log('其他平台触发')
    htmlCode += `<div style="color: #aaa;text-align: right;font-size: 12px;padding:8px;">`
    htmlCode += `${lang}<a class="copy-btn" code-data-index="${
      copyCodeData.length - 1
    }" style="margin-left: 8px;">复制代码</a>`
    htmlCode += `</div>`
    // #endif
    // #ifdef MP-WEIXIN
    htmlCode += `<div style="color: #aaa;text-align: right;font-size: 12px;padding:8px;">`
    htmlCode += `${lang}<a class="copy-btn" code-data-index="${
      copyCodeData.length - 1
    }" style="margin-left: 8px;" >复制代码</a>`
    htmlCode += `</div>`
    // #endif
    htmlCode += `<pre class="hljs" style="padding:10px 8px 0;margin-bottom:5px;overflow: auto;display: block;border-radius: 5px;"><code>${html}</code></pre>`
    htmlCode += '</div>'
    return htmlCode
  },
})
// 带彩色
var indexNum = 0
let htmlString1 = ref('')
let htmlString = ''
const parseNodes = (value) => {
  if (!value) return
  // 解析<br />到\n
  value = value.replace(/<br>|<br\/>|<br \/>/g, '\n')
  value = value.replace(/&nbsp;/g, ' ')

  if (value.split('```').length % 2) {
    let mdtext = value
    if (mdtext[mdtext.length - 1] != '\n') {
      mdtext += '\n'
    }
    htmlString = markdown.render(mdtext)
  } else {
    htmlString = markdown.render(value)
  }
  // 解决小程序表格边框型失效问题
  htmlString = htmlString.replace(/<table/g, `<table class="table"`)
  htmlString = htmlString.replace(/<tr/g, `<tr class="tr"`)
  htmlString = htmlString.replace(/<th>/g, `<th class="th">`)
  htmlString = htmlString.replace(/<td/g, `<td class="td"`)
  htmlString = htmlString.replace(/<hr>|<hr\/>|<hr \/>/g, `<hr class="hr">`)
  console.log(htmlString, 'ddddddddddd')
  // #ifndef APP-NVUE
  jieshu.value = true
  return htmlString
  // #endif

  // 将htmlString转成htmlArray，反之使用rich-text解析
  // #ifdef APP-NVUE
  return parseHtml(htmlString)
  // #endif
}
const kydazi = ref('')

// 不带 然后有打字效果
let qbu = ref('')
let maxst = 0
const dazi = (htmlString) => {
  jieshu.value = false
  // console.log(htmlString, '111111111111111111111111111111111111111111111111111111111111')
  let strin = parseNodes(htmlString)
  console.log(strin, 'ddasdasd')
  // console.log(strin, '1111111111111111111111111111122222111111')

  // if (jieshu.value) {
  //   if (strin.length > maxst) {
  //     maxst = strin.length
  //   }
  //   // console.log(strin.length, '1才等于')
  //   // console.log(maxst,'0-------');
  //   if (indexNum < maxst) {
  //     qbu.value += strin.substr(indexNum, 1)
  //     indexNum++
  //     setTimeout(dazi, 0) // 设置延迟时间，控制字母出现的速度
  //   }
  //   // console.log(indexNum, '2221我看看')
  //   // console.log(qbu.value, '2kkkkkk')

  // }
  // if (strin) {
  //   for (let index = 0; index < strin.length; index++) {
  //     htmlString1.value += strin.substr(index, 1)
  //     console.log(htmlString1.value, '1111111111111111111111111111111111111');
  //   }
  dazi1(strin, 0)
  // }
  // console.log(htmlString1.value, '1111111111111111111111111111111111111');
  return htmlString1.value
}
const dazi1 = (strin, index) => {
  if (index < strin.length) {
    // 输出当前字符
    htmlString1.value += strin.charAt(index)
    // 递归调用，继续输出下一个字符
    setTimeout(() => dazi1(strin, index + 1), 10)
  }
}
// 复制代码
const handleItemClick = (e) => {
  console.log(e.detail.node, 'wdwd')
  let { attrs } = e.detail.node
  console.log(attrs, 'wwwdd')
  let { 'code-data-index': codeDataIndex, class: className } = attrs
  if (className == 'copy-btn') {
    uni.setClipboardData({
      data: copyCodeData[codeDataIndex],
      showToast: false,
      success() {
        uni.showToast({
          title: '复制成功',
          icon: 'none',
        })
      },
    })
  }
}
//微信复制代码
const handleItemClickweiin = (e) => {
  console.log(e, '微信')
  uni.setClipboardData({
    data: e,
    showToast: false,
    success() {
      uni.showToast({
        title: '复制成功',
        icon: 'success',
      })
    },
  })
}
const jieshu = ref(false)
// 获取年级数据
onReady( () => {
  dazi(props.source)
})

</script>

<style lang="scss" scoped>
.ua__markdown {
  font-size: 14px;
  line-height: 1.5;
  word-break: break-all;
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
  }
  h1,
  h2,
  h3 {
    margin-top: 20px;
    margin-bottom: 10px;
  }
  h4,
  h5,
  h6 {
    margin-top: 10px;
    margin-bottom: 10px;
  }
  .h1,
  h1 {
    font-size: 36px;
  }
  .h2,
  h2 {
    font-size: 30px;
  }
  .h3,
  h3 {
    font-size: 24px;
  }
  .h4,
  h4 {
    font-size: 18px;
  }
  .h5,
  h5 {
    font-size: 14px;
  }
  .h6,
  h6 {
    font-size: 12px;
  }
  a {
    background-color: transparent;
    color: #2196f3;
    text-decoration: none;
  }
  hr,
  ::v-deep .hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #e5e5e5;
  }
  img {
    max-width: 35%;
  }
  p {
    margin: 0 0 10px;
  }
  em {
    font-style: italic;
    font-weight: inherit;
  }
  ol,
  ul {
    margin-top: 0;
    margin-bottom: 10px;
    padding-left: 40px;
  }
  ol ol,
  ol ul,
  ul ol,
  ul ul {
    margin-bottom: 0;
  }
  ol ol,
  ul ol {
    list-style-type: lower-roman;
  }
  ol ol ol,
  ul ul ol {
    list-style-type: lower-alpha;
  }
  dl {
    margin-top: 0;
    margin-bottom: 20px;
  }
  dt {
    font-weight: 600;
  }
  dt,
  dd {
    line-height: 1.4;
  }
  .task-list-item {
    list-style-type: none;
  }
  .task-list-item input {
    margin: 0 0.2em 0.25em -1.6em;
    vertical-align: middle;
  }
  pre {
    position: relative;
    z-index: 11;
  }
  code,
  kbd,
  pre,
  samp {
    font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
  }
  code:not(.hljs) {
    padding: 2px 4px;
    font-size: 90%;
    color: #c7254e;
    background-color: #ffe7ee;
    border-radius: 4px;
  }
  code:empty {
    display: none;
  }
  pre code.hljs {
    color: var(--vg__text-1);
    border-radius: 16px;
    background: var(--vg__bg-1);
    font-size: 12px;
  }
  .markdown-wrap {
    font-size: 12px;
    margin-bottom: 10px;
  }
  pre.code-block-wrapper {
    background: #2b2b2b;
    color: #f8f8f2;
    border-radius: 4px;
    overflow-x: auto;
    padding: 1em;
    position: relative;
  }
  pre.code-block-wrapper code {
    padding: auto;
    font-size: inherit;
    color: inherit;
    background-color: inherit;
    border-radius: 0;
  }
  .code-block-header__copy {
    font-size: 16px;
    margin-left: 5px;
  }
  abbr[data-original-title],
  abbr[title] {
    cursor: help;
    border-bottom: 1px dotted #777;
  }
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #e5e5e5;
  }
  blockquote ol:last-child,
  blockquote p:last-child,
  blockquote ul:last-child {
    margin-bottom: 0;
  }
  blockquote .small,
  blockquote footer,
  blockquote small {
    display: block;
    font-size: 80%;
    line-height: 1.42857143;
    color: #777;
  }
  blockquote .small:before,
  blockquote footer:before,
  blockquote small:before {
    content: '\2014 \00A0';
  }
  .blockquote-reverse,
  blockquote.pull-right {
    padding-right: 15px;
    padding-left: 0;
    text-align: right;
    border-right: 5px solid #eee;
    border-left: 0;
  }
  .blockquote-reverse .small:before,
  .blockquote-reverse footer:before,
  .blockquote-reverse small:before,
  blockquote.pull-right .small:before,
  blockquote.pull-right footer:before,
  blockquote.pull-right small:before {
    content: '';
  }
  .blockquote-reverse .small:after,
  .blockquote-reverse footer:after,
  .blockquote-reverse small:after,
  blockquote.pull-right .small:after,
  blockquote.pull-right footer:after,
  blockquote.pull-right small:after {
    content: '\00A0 \2014';
  }
  .footnotes {
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
  }
  .footnotes-list {
    padding-left: 2em;
  }
  table,
  ::v-deep .table {
    border-spacing: 0;
    border-collapse: collapse;
    width: 100%;
    max-width: 65em;
    overflow: auto;
    margin-top: 0;
    margin-bottom: 16px;
  }
  table tr,
  ::v-deep .table .tr {
    border-top: 1px solid #e5e5e5;
  }
  table th,
  table td,
  ::v-deep .table .th,
  ::v-deep .table .td {
    padding: 6px 13px;
    border: 1px solid #e5e5e5;
  }
  table th,
  ::v-deep .table .th {
    font-weight: 600;
    background-color: #eee;
  }
  .hljs[class*='language-']:before {
    position: absolute;
    z-index: 3;
    top: 0.8em;
    right: 1em;
    font-size: 0.8em;
    color: #999;
  }
  .hljs[class~='language-js']:before {
    content: 'js';
  }
  .hljs[class~='language-ts']:before {
    content: 'ts';
  }
  .hljs[class~='language-html']:before {
    content: 'html';
  }
  .hljs[class~='language-md']:before {
    content: 'md';
  }
  .hljs[class~='language-vue']:before {
    content: 'vue';
  }
  .hljs[class~='language-css']:before {
    content: 'css';
  }
  .hljs[class~='language-sass']:before {
    content: 'sass';
  }
  .hljs[class~='language-scss']:before {
    content: 'scss';
  }
  .hljs[class~='language-less']:before {
    content: 'less';
  }
  .hljs[class~='language-stylus']:before {
    content: 'stylus';
  }
  .hljs[class~='language-go']:before {
    content: 'go';
  }
  .hljs[class~='language-java']:before {
    content: 'java';
  }
  .hljs[class~='language-c']:before {
    content: 'c';
  }
  .hljs[class~='language-sh']:before {
    content: 'sh';
  }
  .hljs[class~='language-yaml']:before {
    content: 'yaml';
  }
  .hljs[class~='language-py']:before {
    content: 'py';
  }
  .hljs[class~='language-docker']:before {
    content: 'docker';
  }
  .hljs[class~='language-dockerfile']:before {
    content: 'dockerfile';
  }
  .hljs[class~='language-makefile']:before {
    content: 'makefile';
  }
  .hljs[class~='language-javascript']:before {
    content: 'js';
  }
  .hljs[class~='language-typescript']:before {
    content: 'ts';
  }
  .hljs[class~='language-markup']:before {
    content: 'html';
  }
  .hljs[class~='language-markdown']:before {
    content: 'md';
  }
  .hljs[class~='language-json']:before {
    content: 'json';
  }
  .hljs[class~='language-ruby']:before {
    content: 'rb';
  }
  .hljs[class~='language-python']:before {
    content: 'py';
  }
  .hljs[class~='language-bash']:before {
    content: 'sh';
  }
  .hljs[class~='language-php']:before {
    content: 'php';
  }
}
</style>
